<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一元运购-所有商品</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 
<link rel="stylesheet" type="text/css" href="style/main.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div class="header new_header	">
		<div class="nav">
			<div class="search"><a href="search.html"></a></div>
		    <div class="title"><a href="javascript:">最新揭晓</a></div>
		    <div class="right listicon">
		        <a href="javascript:" class="row_icon" style="display:none;"><img src="images/row.png" alt=""></a>
		        <a href="javascript:" class="cos_icon" ><img src="images/cos.png" alt=""></a>
		    </div>
		</div>
	</div>
	<div class="container">
		<div class="goods">
			<div class="goodslist">
				<div id="wrapper" style="height:100%;">
					<div id="scroller">
						
							<ul>
								<li class="current">
									<a href="javascript:">
										<img class="baseimg" src="images/list1.png" alt="">
										<img class="onimg" src="images/list1on.png" alt="">
										全部
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list2.png" alt="">
										<img class="onimg" src="images/list2on.png" alt="">
										手机数码
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list3.png" alt="">
										<img class="onimg" src="images/list3on.png" alt="">
										电脑办公
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list16.png" alt="">
										<img class="onimg" src="images/list16on.png" alt="">
										钟表首饰
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list4.png" alt="">
										<img class="onimg" src="images/list4on.png" alt="">
										家用电器
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list5.png" alt="">
										<img class="onimg" src="images/list5on.png" alt="">
										化妆个护
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list6.png" alt="">
										<img class="onimg" src="images/list6on.png" alt="">
										食品饮料
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list7.png" alt="">
										<img class="onimg" src="images/list7on.png" alt="">
										家居家纺
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list8.png" alt="">
										<img class="onimg" src="images/list8on.png" alt="">
										礼品箱包
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list9.png" alt="">
										<img class="onimg" src="images/list9on.png" alt="">
										运动互外
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list10.png" alt="">
										<img class="onimg" src="images/list10on.png" alt="">
										营养保健
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list11.png" alt="">
										<img class="onimg" src="images/list11on.png" alt="">
										母婴
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list12.png" alt="">
										<img class="onimg" src="images/list12on.png" alt="">
										汽车
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list13.png" alt="">
										<img class="onimg" src="images/list13on.png" alt="">
										房子
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list14.png" alt="">
										<img class="onimg" src="images/list14on.png" alt="">
										其他商品
									</a>
								</li>
								<li>
									<a href="javascript:">
										<img class="baseimg" src="images/list15.png" alt="">
										<img class="onimg" src="images/list15on.png" alt="">
										限购
									</a>
								</li>
							</ul>
						
					</div>
					<script src="js/iscroll.js" type="text/javascript"></script>
					<script type="text/javascript">
						$(function(){

							//获得列表的高度
							function tabheight(){
								var all_height=0;
								$('.goodslist li').each(function(){
									var height = $(this).height()+1;
									all_height =all_height+height;
								})
								$('#scroller').css('height',all_height+$('.nav').height()+$('.footer').height());
							}
							
							//滚动		
							var myScroll;
							function loaded() {
								tabheight();
								$('.goodslist').css('position','fixed');
								myScroll = new iScroll('wrapper',{
									vScrollbar:false,
									hScrollbar:false,
									bounce:false,
									bounceLock:false,
									checkDOMChanges:true,
								});
							}
							loaded();

							//当前菜单始终显示在屏幕内
							var offsettop  = $('.goodslist li.current').offset().top+$('.goodslist li.current').innerHeight();
							var windowHeight = $(window).height()-$('.footer').height();
							if(offsettop>windowHeight){
								var scrolltop = -(offsettop - windowHeight);
								$('#scroller').css('transform','matrix(1,0,0,1,0,'+scrolltop+')');
							}

							//模式切换
							$('.listicon').click(function(){
								$('.row_icon').toggle();
								$('.cos_icon').toggle();
								$('.goodslist').toggleClass('cos');
								$('.goodsbox').toggleClass('rows');
								loaded();  //重新调用loade()函数
								myScroll.refresh();
							});
							
							//定位
							function tab_pos(){
								var window_width=$(window).width();
								if(window_width>720){
									$('.goodslist').css({"left":"50%","margin-left":"-360px"})
								}else{
									$('.goodslist').css({"left":"0","margin-left":"0"})
								}
							}
							tab_pos();
							$(window).resize(function(){
								tab_pos();
							})
							
						});	
				
					</script>
				</div>
			</div>
			<div class="goodsbox  rows">
				<div class="goods_item">
					<ul>
						<li class="current"><a href="javascript:">即将揭晓</a></li>
						<li><a href="javascript:">人气</a></li>
						<li><a href="javascript:">最新</a></li>
						<li><a href="javascript:">价值<i></i></a></li>
					</ul>
					<div class="clear"></div>
				</div>
				<ul class="i_ul">
					<li class="i_li">
						<a href="detail.html">
							<div class="img_inner">
								<img src="images/li.jpg">
							</div>
							<div class="cont">
								<p class="i_txt">苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7苹果7</p>
								<div class="price">价值：￥6988.00</div>
								<div class="linebox">
									<div class="line">
										<div class="on"></div>
									</div>
								</div>	
								<div class="bom">
									<div class="cart"><a href="javascript:"></a></div>
									<a href="javascript:" class="buybtn">立即一元运购</a>
								</div>
							</div>
						</a>
					</li>
					<li class="i_li">
						<a href="detail.html">
							<div class="img_inner">
								<img src="images/li.jpg">
							</div>
							<div class="cont">
								<p class="i_txt">苹果7苹果7苹果7苹果7</p>
								<div class="price">价值：￥6988.00</div>
								<div class="linebox">
									<div class="line">
										<div class="on"></div>
									</div>
								</div>	
								<div class="bom">
									<div class="cart"><a href="javascript:"></a></div>
									<a href="javascript:" class="buybtn">立即一元运购</a>
								</div>
							</div>
						</a>
					</li>
					<li class="i_li">
						<a href="detail.html">
							<div class="img_inner">
								<img src="images/li.jpg">
							</div>
							<div class="cont">
								<p class="i_txt">苹果7苹果7苹果7苹果7</p>
								<div class="price">价值：￥6988.00</div>
								<div class="linebox">
									<div class="line">
										<div class="on"></div>
									</div>
								</div>	
								<div class="bom">
									<div class="cart"><a href="javascript:"></a></div>
									<a href="javascript:" class="buybtn">立即一元运购</a>
								</div>
							</div>
						</a>
					</li>
					<li class="i_li">
						<a href="detail.html">
							<div class="img_inner">
								<img src="images/li.jpg">
							</div>
							<div class="cont">
								<p class="i_txt">苹果7苹果7苹果7苹果7</p>
								<div class="price">价值：￥6988.00</div>
								<div class="linebox">
									<div class="line">
										<div class="on"></div>
									</div>
								</div>	
								<div class="bom">
									<div class="cart"><a href="javascript:"></a></div>
									<a href="javascript:" class="buybtn">立即一元运购</a>
								</div>
							</div>
						</a>
					</li>
					<li class="i_li">
						<a href="detail.html">
							<div class="img_inner">
								<img src="images/li.jpg">
							</div>
							<div class="cont">
								<p class="i_txt">苹果7苹果7苹果7苹果7</p>
								<div class="price">价值：￥6988.00</div>
								<div class="linebox">
									<div class="line">
										<div class="on"></div>
									</div>
								</div>	
								<div class="bom">
									<div class="cart"><a href="javascript:"></a></div>
									<a href="javascript:" class="buybtn">立即一元运购</a>
								</div>
							</div>
						</a>
					</li>
					<li class="i_li">
						<a href="detail.html">
							<div class="img_inner">
								<img src="images/li.jpg">
							</div>
							<div class="cont">
								<p class="i_txt">苹果7苹果7苹果7苹果7</p>
								<div class="price">价值：￥6988.00</div>
								<div class="linebox">
									<div class="line">
										<div class="on"></div>
									</div>
								</div>	
								<div class="bom">
									<div class="cart"><a href="javascript:"></a></div>
									<a href="javascript:" class="buybtn">立即一元运购</a>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			
		});
	</script>
	<!-- 底部 -->
	<div class="footer">
		<ul class="wd_nav">
			<li class="home"><a href="index.html">首页</a></li>
			<li class="goods current"><a href="list.html">所有商品</a></li>
			<li class="news" ><a href="new.html">最新揭晓</a></li>
			<li class="car" id="shopCart"><a href="cart.html">购物车</a><i>3</i></li>
			<li class="my"><a href="my.html">我的</a></li>
		</ul>
	</div>
	<!-- 添加到购物车 -->
	<div id="flyItem" class="fly_item">
		<img src="" width="50" height="50"/>
	</div>
	<script type="text/javascript" src="js/parabola.js"></script>
	<script type="text/javascript">
		//元素以及其他一些变量
		var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");
		var numberItem = 0;
		// 抛物线运动
		var myParabola = funParabola(eleFlyElement, eleShopCart, {
			speed: 500, //抛物线速度
			curvature: 0.0008, //控制抛物线弧度
			complete: function() {
				eleFlyElement.style.visibility = "hidden";
			}
		});
		if (eleFlyElement && eleShopCart) {	
			[].slice.call(document.getElementsByClassName("cart")).forEach(function(button) {
					button.addEventListener("click", function(event) {
						
						var src = $(this).parents('.i_li').find('.img_inner img').attr("src");
						$("#flyItem").find("img").attr("src", src);
						// 滚动大小
						var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
								scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
						eleFlyElement.style.left = event.clientX + scrollLeft + "px";
						eleFlyElement.style.top = event.clientY + scrollTop + "px";
						eleFlyElement.style.visibility = "visible";
			
						// 需要重定位
						myParabola.position().move();
					});
			});
		}
	</script>
</body>
</html>